<template>
  <div id="manager">
      <div id="map-container">
        <BaiduMap :apiKey="apiKey" :center="mapCenter" :zoom="mapZoom":markers="taskArray"/>
      </div>
  </div>
</template>

<script>
import BaiduMap from './BaiduMap.vue'

export default {
  name: 'Manager',
  components: { BaiduMap },
  data() {
    return {
      apiKey: 'KRTLy2aLuHV7H3CNz3GFIFoythfsb9iB',
      mapCenter: { lng: -74.002, lat: 40.424 },
      mapZoom: 11,
      taskArray : []
    }
  },
  mounted(){
    var myHeaders = new Headers();
      myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
      myHeaders.append("Authorization", "Bearer "+sessionStorage.getItem('token'))
      var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
      };

    fetch("http://1.92.204.101:5000/task/get_task_statement", requestOptions)
      .then(response => response.text())
      .then(result => {
        var data = JSON.parse(result);
        console.log(data[0])
        for(  var i=0; i<data.length; i++)
      {
        var da = data[i]
        this.taskArray.push([da.placex, da.placey]) ;
      } 
      })
      .catch(error => console.log('error', error));
  },
  methods:{
    goBack() {
      var myHeaders = new Headers();
      myHeaders.append("User-Agent", "Apifox/1.0.0 (https://apifox.com)");
      myHeaders.append("Authorization", "Bearer "+sessionStorage.getItem('token'))
      var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
      };

    fetch("http://1.92.204.101:5000/task/get_task_statement", requestOptions)
      .then(response => response.text())
      .then(result => {
        var data = JSON.parse(result);
        console.log(data[0])
        for(  var i=0; i<data.length; i++)
      {
        var da = data[i]
        this.taskArray.push([da.placex, da.placey]) ;
      } 
      })
      .catch(error => console.log('error', error));
    }
  },
}
</script>

<style lang="scss" scoped>
.documentation-container {
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .document-btn {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    padding: 0 16px;
    margin: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }

  .map-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
  }
}
</style>
